<%--<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html lang="zh">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <title>上传 Excel 文件</title>--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--    <style>--%>
<%--        body {--%>
<%--            font-family: Arial, Helvetica, "Microsoft YaHei", sans-serif;--%>
<%--            background: linear-gradient(135deg, #e0f7fa, #80deea);--%>
<%--            margin: 0;--%>
<%--            padding: 0;--%>
<%--            display: flex;--%>
<%--            height: 100vh;--%>
<%--            align-items: center;--%>
<%--            justify-content: center;--%>
<%--        }--%>
<%--        .container {--%>
<%--            background: #fff;--%>
<%--            padding: 50px 60px;--%>
<%--            border-radius: 12px;--%>
<%--            box-shadow: 0 6px 18px rgba(0,0,0,0.15);--%>
<%--            text-align: center;--%>
<%--            max-width: 560px;--%>
<%--            width: 100%;--%>
<%--        }--%>
<%--        h1 { margin-bottom: 28px; font-size: 26px; color: #333; }--%>

<%--        /* 自定义文件选择外观 */--%>
<%--        .file-input { position: relative; display: inline-block; width: 92%; margin: 0 auto 20px; }--%>
<%--        .file-input input[type="file"] {--%>
<%--            position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;display: none;--%>
<%--        }--%>
<%--        .file-label {--%>
<%--            display: block; background-color: #f9fbfc; border: 2px dashed #c6d5db;--%>
<%--            padding: 16px 14px; border-radius: 10px; font-size: 16px; color: #607d8b;--%>
<%--            transition: all .25s ease; user-select: none;cursor: pointer;--%>
<%--        }--%>
<%--        .file-label:hover { background-color: #e8f7fb; border-color: #26c6da; color: #26c6da; }--%>
<%--        .filename { margin-top: 8px; font-size: 13px; color: #607d8b; }--%>

<%--        .btn {--%>
<%--            display: inline-block; background-color: #4CAF50; color: #fff;--%>
<%--            padding: 12px 22px; border: none; border-radius: 8px; cursor: pointer;--%>
<%--            font-size: 17px; text-decoration: none; transition: background .25s ease, transform .15s ease;--%>
<%--            margin: 6px;--%>
<%--        }--%>
<%--        .btn:hover { background-color: #45a049; transform: translateY(-1px); }--%>
<%--        .btn.secondary { background-color: #1976d2; }--%>
<%--        .btn.secondary:hover { background-color: #1669bb; }--%>

<%--        .alert { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; display: none; }--%>
<%--        .alert.success { background: #e8f5e9; color: #256029; border: 1px solid #c8e6c9; }--%>
<%--        .alert.error { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="container">--%>
<%--    <h1>上传 Excel 文件</h1>--%>

<%--    <%--%>
<%--        String ctx = request.getContextPath();--%>
<%--    %>--%>

<%--    <form id="uploadForm" action="<%= ctx %>/upload" method="post" enctype="multipart/form-data">--%>
<%--        <div class="file-input">--%>
<%--            <label class="file-label" id="fileLabel">--%>
<%--                点击选择 Excel 文件（.xlsx）--%>
<%--                <input id="fileField" type="file" name="file" accept=".xlsx" required />--%>
<%--            </label>--%>
<%--            <div class="filename" id="fileName"></div>--%>
<%--        </div>--%>

<%--        <button class="btn" type="submit" id="uploadBtn">上传</button>--%>
<%--        <a class="btn secondary" id="openBtn" href="<%= ctx %>/generated.html" target="_blank" style="display:none;">查看生成的页面</a>--%>

<%--        <div id="msgBox" class="alert"></div>--%>
<%--    </form>--%>
<%--</div>--%>

<%--<script>--%>
<%--    (function () {--%>
<%--        var form = document.getElementById('uploadForm');--%>
<%--        var fileField = document.getElementById('fileField');--%>
<%--        var fileNameEl = document.getElementById('fileName');--%>
<%--        var msgBox = document.getElementById('msgBox');--%>
<%--        var uploadBtn = document.getElementById('uploadBtn');--%>
<%--        var openBtn = document.getElementById('openBtn');--%>

<%--        // 显示所选文件名，在选择了文件 或 取消选择文件 时触发--%>
<%--        fileField.addEventListener('change', function () {--%>
<%--            if (fileField.files && fileField.files.length > 0) {--%>
<%--                fileNameEl.textContent = "已选择文件：" + fileField.files[0].name;--%>
<%--            } else {--%>
<%--                fileNameEl.textContent = "";--%>
<%--            }--%>
<%--        });--%>

<%--        // Ajax 提交--%>
<%--        form.addEventListener('submit', function (e) {--%>
<%--            e.preventDefault();--%>

<%--            if (!fileField.files || fileField.files.length === 0) {--%>
<%--                showMsg(false, "请先选择 Excel 文件");--%>
<%--                return;--%>
<%--            }--%>

<%--            uploadBtn.disabled = true;--%>
<%--            uploadBtn.textContent = "上传中...";--%>

<%--            var action = form.getAttribute('action');//获取表单中的action属性--%>
<%--            console.log(action);--%>
<%--            var formData = new FormData(form);//获取表单中的所有数据--%>
<%--            for (var pair of formData.entries()) {--%>
<%--                console.log(pair[0] + ': ' + pair[1]);--%>
<%--            }--%>

<%--            fetch(action, {--%>
<%--                method: 'POST',--%>
<%--                body: formData--%>
<%--            }).then(function (resp) {--%>
<%--                return resp.json();--%>
<%--            }).then(function (data) {--%>
<%--                console.log("data:"+data+",data:success:"+data.success+",data.url:"+data.url);--%>
<%--                if (data && data.success) {--%>
<%--                    showMsg(true, data.message || "上传成功！");--%>
<%--                    // 显示“查看生成的页面”按钮--%>
<%--                    if (data.url) {--%>
<%--                        openBtn.href = data.url.startsWith("/") ? ("<%= ctx %>" + data.url) : data.url;--%>
<%--                    }--%>
<%--                    openBtn.style.display = 'inline-block';--%>
<%--                } else {--%>
<%--                    showMsg(false, (data && data.message) ? data.message : "上传失败");--%>
<%--                    openBtn.style.display = 'none';--%>
<%--                }--%>
<%--            }).catch(function (err) {--%>
<%--                showMsg(false, "请求失败：" + err);--%>
<%--                openBtn.style.display = 'none';--%>
<%--            }).finally(function () {--%>
<%--                uploadBtn.disabled = false;--%>
<%--                uploadBtn.textContent = "上传";--%>
<%--            });--%>
<%--        });--%>

<%--        function showMsg(success, text) {--%>
<%--            msgBox.textContent = text || "";--%>
<%--            msgBox.className = "alert " + (success ? "success" : "error");--%>
<%--            msgBox.style.display = text ? "inline-block" : "none";--%>
<%--        }--%>
<%--    })();--%>
<%--</script>--%>
<%--</body>--%>
<%--</html>--%>
<%--<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>--%>
<%--<!DOCTYPE html>--%>
<%--<html lang="zh">--%>
<%--<head>--%>
<%--    <meta charset="UTF-8">--%>
<%--    <title>上传 Excel 文件</title>--%>
<%--    <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--    <style>--%>
<%--        body {--%>
<%--            font-family: Arial, Helvetica, "Microsoft YaHei", sans-serif;--%>
<%--            background: linear-gradient(135deg, #e0f7fa, #80deea);--%>
<%--            margin: 0;--%>
<%--            padding: 0;--%>
<%--            display: flex;--%>
<%--            height: 100vh;--%>
<%--            align-items: center;--%>
<%--            justify-content: center;--%>
<%--        }--%>
<%--        .container {--%>
<%--            background: #fff;--%>
<%--            padding: 50px 60px;--%>
<%--            border-radius: 12px;--%>
<%--            box-shadow: 0 6px 18px rgba(0,0,0,0.15);--%>
<%--            text-align: center;--%>
<%--            max-width: 560px;--%>
<%--            width: 100%;--%>
<%--        }--%>
<%--        h1 {--%>
<%--            margin-bottom: 28px;--%>
<%--            font-size: 26px;--%>
<%--            color: #333;--%>
<%--        }--%>

<%--        /* 自定义文件选择外观 */--%>
<%--        .file-input {--%>
<%--            position: relative;--%>
<%--            display: inline-block;--%>
<%--            width: 92%;--%>
<%--            margin: 0 auto 20px;--%>
<%--        }--%>
<%--        .file-input input[type="file"] {--%>
<%--            position: absolute;--%>
<%--            inset: 0;--%>
<%--            opacity: 0;--%>
<%--            cursor: pointer;--%>
<%--            width: 100%;--%>
<%--            height: 100%;--%>
<%--        }--%>
<%--        .file-label {--%>
<%--            display: block;--%>
<%--            background-color: #f9fbfc;--%>
<%--            border: 2px dashed #c6d5db;--%>
<%--            padding: 16px 14px;--%>
<%--            border-radius: 10px;--%>
<%--            font-size: 16px;--%>
<%--            color: #607d8b;--%>
<%--            transition: all 0.25s ease;--%>
<%--            user-select: none;--%>
<%--        }--%>
<%--        .file-label:hover {--%>
<%--            background-color: #e8f7fb;--%>
<%--            border-color: #26c6da;--%>
<%--            color: #26c6da;--%>
<%--        }--%>

<%--        .btn {--%>
<%--            display: inline-block;--%>
<%--            background-color: #4CAF50;--%>
<%--            color: #fff;--%>
<%--            padding: 12px 22px;--%>
<%--            border: none;--%>
<%--            border-radius: 8px;--%>
<%--            cursor: pointer;--%>
<%--            font-size: 17px;--%>
<%--            text-decoration: none;--%>
<%--            transition: background 0.25s ease, transform 0.15s ease;--%>
<%--            margin: 0 6px;--%>
<%--        }--%>
<%--        .btn:hover { background-color: #45a049; transform: translateY(-1px); }--%>
<%--        .btn.secondary { background-color: #1976d2; }--%>
<%--        .btn.secondary:hover { background-color: #1669bb; }--%>

<%--        .alert {--%>
<%--            margin: 14px 0 0;--%>
<%--            padding: 10px 14px;--%>
<%--            border-radius: 8px;--%>
<%--            font-size: 14px;--%>
<%--            display: inline-block;--%>
<%--        }--%>
<%--        .alert.success {--%>
<%--            background: #e8f5e9;--%>
<%--            color: #256029;--%>
<%--            border: 1px solid #c8e6c9;--%>
<%--        }--%>

<%--        .tips {--%>
<%--            margin-top: 10px;--%>
<%--            color: #78909c;--%>
<%--            font-size: 13px;--%>
<%--        }--%>
<%--    </style>--%>
<%--</head>--%>
<%--<body>--%>
<%--<div class="container">--%>
<%--    <h1>上传 Excel 文件</h1>--%>

<%--    <%--%>
<%--        String ctx = request.getContextPath();--%>
<%--        boolean success = "1".equals(request.getParameter("success"));--%>
<%--    %>--%>

<%--    <form action="<%= ctx %>/upload" method="post" enctype="multipart/form-data">--%>
<%--        <div class="file-input">--%>
<%--            <label class="file-label" for="fileField">--%>
<%--                点击选择 Excel 文件（.xlsx）--%>
<%--                <input id="fileField" type="file" name="file" accept=".xlsx" required />--%>
<%--            </label>--%>
<%--        </div>--%>
<%--        <button class="btn" type="submit">上传</button>--%>

<%--        <% if (success) { %>--%>
<%--        <div class="alert success">上传成功！已生成静态页面。</div>--%>
<%--        <div style="margin-top:14px;">--%>
<%--            <a class="btn secondary" href="<%= ctx %>/generated.html" target="_blank">查看生成的页面</a>--%>
<%--        </div>--%>
<%--        <% } %>--%>

<%--        <div class="tips">上传新的 Excel 会覆盖上一次生成的静态页面（generated.html）。</div>--%>
<%--    </form>--%>
<%--</div>--%>
<%--</body>--%>
<%--</html>--%>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>上传 Excel 文件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, Helvetica, "Microsoft YaHei", sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #80deea);
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: #fff;
            padding: 50px 60px;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0,0,0,0.15);
            text-align: center;
            max-width: 560px;
            width: 100%;
        }
        h1 { margin-bottom: 28px; font-size: 26px; color: #333; }

        /* 自定义文件选择外观 */
        .file-input { position: relative; display: inline-block; width: 92%; margin: 0 auto 20px; }
        .file-input input[type="file"] {
            position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;display: none;
        }
        .file-label {
            display: block; background-color: #f9fbfc; border: 2px dashed #c6d5db;
            padding: 16px 14px; border-radius: 10px; font-size: 16px; color: #607d8b;
            transition: all .25s ease; user-select: none;cursor: pointer;
        }
        .file-label:hover { background-color: #e8f7fb; border-color: #26c6da; color: #26c6da; }
        .filename { margin-top: 8px; font-size: 13px; color: #607d8b; }

        .btn {
            display: inline-block; background-color: #4CAF50; color: #fff;
            padding: 12px 22px; border: none; border-radius: 8px; cursor: pointer;
            font-size: 17px; text-decoration: none; transition: background .25s ease, transform .15s ease;
            margin: 6px;
        }
        .btn:hover { background-color: #45a049; transform: translateY(-1px); }
        .btn.secondary { background-color: #1976d2; }
        .btn.secondary:hover { background-color: #1669bb; }

        .alert { margin-top: 14px; padding: 10px 14px; border-radius: 8px; font-size: 14px; display: none; }
        .alert.success { background: #e8f5e9; color: #256029; border: 1px solid #c8e6c9; }
        .alert.error { background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2; }
    </style>
</head>
<body>
<div class="container">
    <h1>上传 Excel 文件</h1>

    <%
        String ctx = request.getContextPath();
    %>

    <form id="uploadForm" action="<%= ctx %>/upload" method="post" enctype="multipart/form-data">
        <div class="file-input">
            <label class="file-label" id="fileLabel">
                点击选择 Excel 文件（.xlsx）
                <input id="fileField" type="file" name="file" accept=".xlsx" required />
            </label>
            <div class="filename" id="fileName"></div>
        </div>

        <button class="btn" type="submit" id="uploadBtn">上传</button>
        <a class="btn secondary" id="openBtn" href="<%= ctx %>/generated.html" target="_blank" style="display:none;">查看生成的页面</a>

        <div id="msgBox" class="alert"></div>
    </form>
</div>

<script>
    (function () {
        var form = document.getElementById('uploadForm');
        var fileField = document.getElementById('fileField');
        var fileNameEl = document.getElementById('fileName');
        var msgBox = document.getElementById('msgBox');
        var uploadBtn = document.getElementById('uploadBtn');
        var openBtn = document.getElementById('openBtn');

        // 显示所选文件名，在选择了文件 或 取消选择文件 时触发
        fileField.addEventListener('change', function () {
            if (fileField.files && fileField.files.length > 0) {
                fileNameEl.textContent = "已选择文件：" + fileField.files[0].name;
            } else {
                fileNameEl.textContent = "";
            }
        });

        // 使用 XMLHttpRequest 提交表单
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            if (!fileField.files || fileField.files.length === 0) {
                showMsg(false, "请先选择 Excel 文件");
                return;
            }

            uploadBtn.disabled = true;
            uploadBtn.textContent = "上传中...";

            var action = form.getAttribute('action'); // 获取表单中的 action 属性
            var formData = new FormData(form); // 获取表单中的所有数据

            // 打印表单数据调试
            for (var pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }

            // 创建 XMLHttpRequest 请求
            var xhr = new XMLHttpRequest();
            //初始化，设置类型与url
            xhr.open('POST', action, true);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    try {
                        var data = JSON.parse(xhr.responseText); // 解析 JSON 数据
                        console.log("data:", data);

                        if (data && data.success) {
                            showMsg(true, data.message || "上传成功！");
                            // 显示“查看生成的页面”按钮
                            if (data.url) {
                                openBtn.href = data.url.startsWith("/") ? ("<%= ctx %>" + data.url) : data.url;
                            }
                            openBtn.style.display = 'inline-block';
                        } else {
                            showMsg(false, (data && data.message) ? data.message : "上传失败");
                            openBtn.style.display = 'none';
                        }
                    } catch (e) {
                        showMsg(false, "返回数据解析失败");
                    }
                } else {
                    showMsg(false, "请求失败：" + xhr.status);
                    openBtn.style.display = 'none';
                }
            };
            xhr.onerror = function () {
                showMsg(false, "请求失败");
                openBtn.style.display = 'none';
            };

            // 发送表单数据
            xhr.send(formData);
        });

        function showMsg(success, text) {
            msgBox.textContent = text || "";
            msgBox.className = "alert " + (success ? "success" : "error");
            msgBox.style.display = text ? "inline-block" : "none";
        }
    })();

</script>




</body>
</html>
